import React, { useMemo, useState } from "react";
import { useSelector } from "react-redux";
import { useLocation, useNavigate } from "react-router-dom";
import { Button, Cell } from "react-vant";

// Detail组件
const Detail = () => {
  // 获取当前路由的state
  const { state } = useLocation();
  // 获取路由跳转函数
  const navigate = useNavigate();
  // 从redux中获取orcPerson数据
  const orcPerson = useSelector((state) => state.orcPerson.totalOrcPersons);
  // 使用useMemo对orcPerson进行过滤，获取state为true的数据
  const orcPersonSelectByState = useMemo(() => {
    return orcPerson.filter((v) => v.state);
  }, [orcPerson]);

  const arr = useMemo(() => {
    if (orcPersonSelectByState.length === 0) return [];
    if (orcPersonSelectByState.length === 1) {
      return [["A", "B", "C", "D", "E"]];
    } else {
      return [
        ["A", "B", "C", "D", "E"],
        ["A", "B", "C", "D", "E"],
      ];
    }
  }, [orcPersonSelectByState]);
  // 记录所有的点击点
  const [posArr, setPosArr] = useState([]);
  // 获取最后和人数有点的位置
  const lastPosArr = useMemo(() => {
    return posArr.slice(-orcPersonSelectByState.length);
  }, [posArr, orcPersonSelectByState]);
  const addPosArr = (x, y) => {
    setPosArr([...posArr, { x, y }]);
  };
  console.log(posArr);
  console.log(lastPosArr);
  // 打印orcPerson数据

  return (
    <div>
      {/* 航班信息 */}
      <div style={{ border: "1px solid #ccc" }}>
        <div>{state.dt}</div>
        <div>
          {state.dasn}
          {state.dat}到{state.aasn}
          {state.aat}
        </div>
        <div>
          {state.amn}
          {state.amt} <span style={{ color: "red" }}>￥{state.atp}</span>
        </div>
      </div>
      {/* 乘车人 */}
      <div>
        <h2>
          <span>当前乘车人</span>
          <Button type="primary" onClick={() => navigate("/orc/person/select")}>
            添加乘车人
          </Button>
        </h2>
        {orcPersonSelectByState.map((v) => {
          return (
            <Cell
              key={v.id}
              title={
                <div style={{ display: "flex" }}>
                  {v.name}-{v.identityCard}
                </div>
              }
            ></Cell>
          );
        })}
      </div>
      {/* 选座 */}
      <h2>选座</h2>
      {
        <ul>
          {arr.map((v, x) => {
            return (
              <li key={x}>
                <ul
                  style={{
                    display: "flex",
                    justifyContent: "space-around",
                    alignItems: "center",
                  }}
                >
                  {v.map((v, y) => {
                    return (
                      <li
                        onClick={() => addPosArr(x, y)}
                        key={y}
                        style={{
                          height: 60,
                          border: "1px solid #ccc",
                          flex: 1,
                          background: lastPosArr.some(
                            (v) => v.x === x && v.y === y
                          )
                            ? "red"
                            : "white",
                        }}
                      >
                        {v}
                      </li>
                    );
                  })}
                </ul>
              </li>
            );
          })}
        </ul>
      }
      {/* 支付 */}
      <Button
        type="primary"
        block
        round
        style={{ marginTop: 10 }}
        onClick={() =>
          navigate(
            `/payload?price=${
              state.atp * orcPersonSelectByState.length
            }&id=${Math.random().toString().slice(2)}&title=车票`
          )
        }
      >
        立即支付
      </Button>
    </div>
  );
};

export default Detail;
